<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body {
        background-image: url("WeBlog/img/reg_bg_min.jpg") no-repeat center;
        background-size: 100% 100%;
        background-attachment:fixed;
    }
    .reg_back {
        width: 600px;
        height: 600px;
        border: 2px solid #455e85;
        background: #455e85;
        margin: 120px auto;
        margin-top: 20px;
        opacity: 0.8;
    }
    .reg_left {
        float: left;
        margin: 10px;
    }
    .reg_left > p:first-child {
        color: yellow;
        font-size: 20px;
    }
    .reg_left > p:last-child {
        color: #A6A6A6;
        font-size: 20px;
    }
    .reg_center {
        float: left;
        width: 500px;
    }
    .reg_right {
        float: right;
        margin: 30px;
    }
    .reg_right > p:first-child {
        font-size: 15px;
    }
    .reg_right p a {
        color: crimson;
    }
    .td_left {
        width: 100px;
        text-align: right;
        height: 40px;
    }
    .td_right {
        padding-left: 40px;
    }
    #username ,#password,#Email, #t_password ,#Telphone,#Birthday,#checkcode,#introduction{
        width: 220px;
        height: 30px;
        border: 1px solid #A4A4A4;
        border-radius: 8px;
        padding-left: 10px;
    }
    #checkcode{
        width: 120px;
    }
    #img_check{
        vertical-align: middle;
        height: 30px;
        width: 95px;
    }
    #btn_sub{
        background: #A4A4A4;
        width: 100px;
        height: 40px;
        border: 1px solid #A4A4A4;
        border-radius: 8px;
    }
    .error{
        color:red;
    }
    #td_sub{
        padding-left: 150px;
    }</Style>
<body>
    <div class="reg_back">
        <div class="reg_left">
            <p>新用户注册</p>
        </div>
        <div class="reg_center">
            <div class="reg_form">
                <form action="/ReGister.do" method="POST" id="form" enctype="multipart/form-data">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right"><input type="text" name="username" placeholder="请输入用户名(英文字符或数字)" id="username" required>
                                <span id="s_username" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right"><input type="password" name="password" placeholder="请输入密码（长度在6~12位之间）" id="password" required>
                                <span id="s_password" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">确认密码</label></td>
                            <td class="td_right"><input type="password" name="password" placeholder="请确认密码" id="t_password" required>
                                <span id="s_password1" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email">
                                <span id="s_email" class="error"></span>
                            </td>
                        </tr>
                        
                        <tr>
                            <td class="td_left"><label for="Telphone">手机号</label></td>
                            <td class="td_right"><input type="text" name="phone" placeholder="请输入您的手机号"
                                                        id="Telphone">
                                <span id="s_telphone" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label>性别</label></td>
                            <td class="td_right">
                                <input type="radio" name="sex" value="male"> 男
                                <input type="radio" name="sex" value="female"> 女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="Birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="Birthday"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="textarea">自我介绍</label></td>
                            <td class="td_right"><textarea name="individualResume" id="introduction" placeholder="自我介绍50字以内"></textarea></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" required>
                                <img src="" id="img_check"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="file">头像</label></td>
                            <td class="td_right"><input type="file" name="headImg" id="file" accept="image/*"></td>
                        </tr>
                        <tr>
                            <td colspan="2" id="td_sub"><input type="submit" value="注册" id="btn_sub"></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="reg_right">
            <p>已有账号?<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script>
     window.onload = function () {
        document.getElementById("form").onsubmit = function () {
            return checkUsername() && checkPassword() &&checkEmail() && truePassword() && checkTelphone();
        }
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
        document.getElementById("Email").onblur = checkEmail;
        document.getElementById("t_password").onblur = truePassword;
        document.getElementById("Telphone").onblur = checkTelphone;
    }

    //校验用户名
    function checkUsername() {
        var username = document.getElementById("username").value;
        var reg_username = /^([a-zA-Z0-9_-])/;
        var flag = reg_username.test(username);
        var s_username = document.getElementById("s_username");
        if (flag) {
            s_username.innerHTML = " √ ";
        } else {
            s_username.innerHTML = "用户名格式有误！";
        }
        return flag;
    }

    //校验密码
    function checkPassword(){
        var password = document.getElementById("password").value;
        var reg_password = /^\w{6,12}$/;
        var flag = reg_password.test(password);
        var s_password = document.getElementById("s_password");
        if(flag){
            s_password.innerHTML = " √ ";
        }else{
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }

    //确认密码
    function truePassword(){
        var password1 = document.getElementById("password").value;
        var password2 = document.getElementById("t_password").value;
        var s_password1 = document.getElementById("s_password1");
        if(password1 == password2){
            s_password1.innerHTML = " √ ";
        }else{
            s_password1.innerHTML = "密码不一致";
        }
        return password1;
    }

    //校验Email
    function checkEmail(){
        var email = document.getElementById("Email").value;
        var reg_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        var flag = reg_email.test(email);
        var s_email = document.getElementById("s_email");
        if(flag){
            s_email.innerHTML = " √ ";
        }else{
            s_email.innerHTML = "Email格式有误";
        }
        return flag;
    }

    //校验手机号
    function checkTelphone(){
        var telphone = document.getElementById("Telphone").value;
        var reg_telphone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        var flag = reg_telphone.test(telphone);
        var s_telphone = document.getElementById("s_telphone");
        if(flag){
            s_telphone.innerHTML = " √ ";
        }else{
            s_telphone.innerHTML = "手机号输入有误";
        }
        return flag;
    }
</script>
</html>